<template>
    <div class="main">
      <!-- 搜索栏 -->
      <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="商品搜索：">
        <el-input class="input"  v-model="search.KeyWords" placeholder="请输入商品名称，关键字，商品ID"></el-input>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker
      value-format="yyyy-MM-dd"
      v-model="search.start"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
       <el-form-item label="结束日期">
        <el-date-picker
        value-format="yyyy-MM-dd"
      v-model="search.end"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      </el-form>
      <!-- 搜索栏 -->
      <div class="anNiu">
         <el-button class="bt" @click="$router.push('/itemAdd')" type="primary" >添加商品</el-button>
      </div>
      <!-- 商品列表 -->
      <el-table
      :data="items"
      :height="450"
      style="width: 100%;">
    <!--   名称 -->
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <!-- 产品分类 -->
       <el-table-column
        prop="cpFl"
        label="产品分类">
      </el-table-column>
        <!-- 图标 -->
        <el-table-column
        prop="img"
        label="商品图"
        width="180">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                :src="scope.row.img"
                :preview-src-list="srcList">
              </el-image>
            </div>
      </template>
      </el-table-column>
      <!-- 排序 -->
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <!-- 状态 -->
      <el-table-column
        prop="enAbled"
        label="状态">
        <template slot-scope="scope">
        <el-switch v-model="scope.row.enAbled" active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
      </template>
      </el-table-column>
       <el-table-column  label="操作">
         <template slot-scope="scope">
        <el-button
          style="padding-left: 12;width: 52px;text-align: center;"
          size="mini"
          type="primary"
          @click="cartUpdate(scope.row.id)"
          >编辑</el-button>
        <el-button
          style="padding-left:12;width: 52px;text-align: center;"
          size="mini"
          type="danger"
          @click="delCart(scope.row.id)"
        >删除</el-button>
      </template>
    </el-table-column>
      </el-table>
    <!-- 分页处理 -->
    <el-pagination
    :page-size="pageSize"
  layout="prev, pager, next,  jumper, sizes, total"
  style="float: right;margin-top: 20px;"
  @size-change="sizeChange"
  @current-change="currentChange"
  :total="total">
    </el-pagination>
  <!-- 分页处理 -->
<el-drawer
  title="我是标题"
  :visible.sync="itemUpdateShow"
  :with-header="false">
 <cart-update :items="allItem" :itemDetail="itemDetail"></cart-update>
</el-drawer>
</div>
</template>

<script>
import { fecthCartItem, fectdelCart, fecthItemDetail, fecthCateLists } from '_api'
import CartUpdate from './Components/CartUpdate'
export default {
  name: 'CartLists',
  data () {
    return {
      search: {
        KeyWords: '',
        start: '', // 开始时间
        end: '' // 结束时间
      },
      item: {
        name: '',
        price: 0,
        cpFl: '',
        cartId: 0,
        desc: '',
        sale: 0,
        sort: 0,
        onSale: true,
        img: '',
        content: ''
      },
      page: 1, // 一页
      pageSize: 10, // 10条
      total: 0,
      allItem: [],
      items: [],
      itemUpdateShow: false,
      // 增加商品
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  methods: {
    fecthCates () {
      // 请求所有商品分类
      fecthCateLists().then(res => {
        if (res.data.code === 200) {
          this.items = res.data.data.list
        }
      })
    },
    cartUpdate (id) {
      fecthItemDetail(id).then(res => {
        if (res.data.code === 200) {
          this.itemDetail = {
            ...res.data.data
          }
        }
      })
      this.itemUpdateShow = true
      console.log(id)
    },
    delCart (id) {
      // 删除按钮
      // 弹出确认框确认删除
      this.$confirm('此操作会删除该分类,继续吗').then(() => {
        fectdelCart(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              message: '恭喜您,你将永远失去❤',
              type: 'success',
              duration: 1024,
              onClose: () => {
                this.$router.go(0)
              }
            })
          } else {
            this.$message({
              message: '！删除失败！！！！',
              type: 'error',
              duration: 1500
            })
          }
        })
      })
    },
    sizeChange (pageSize) {
      this.pageSize = pageSize
      this.fecthCartItem()
    },
    currentChange (page) {
      this.page = page
      this.fecthCartItem()
    },
    onSubmit () {
      this.fecthCartItem()
    },
    // 请求商品管理数据
    fecthCartItem () {
      fecthCartItem({
        ...this.search,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          this.items = res.data.data.list
          this.total = res.data.data.total
        }
      })
    }
  },
  created () {
    this.fecthCartItem()
    this.fecthCates()
  },
  components: {
    CartUpdate
  }
}
</script>

<style lang="scss" scoped>
.input{
  width: 300px;
}
.bt{
  width: 78px;
  height: 35px;
  padding: 10px;
  margin-right: 10px;
}
.main{
  margin-left: 20px;
}
.table1{
  height: 200px;
  width: 200px;
}
.anNiu{
  padding: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #000;;
}
</style>
